<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <!-- 头部 -->
        <el-row>
          <div class="title">
            <el-button type="primary" size="small" @click="addFn">添加房产</el-button>
            <el-row>

              <el-select v-model="title" placeholder="全部分类" @change="getCateId">
                <el-option label="全部分类" value="" />
                <el-option
                  v-for="item in categoriesList"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                />
              </el-select>

              <el-select v-model="value" placeholder="全部经纪" @change="getAgentId">
                <el-option label="全部经纪" value="" />
                <el-option
                  v-for="item in agentList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>

              <el-input v-model="title_contains" class="search" placeholder="请输入内容" />
              <el-button @click="search">筛选</el-button>

            </el-row>
          </div>
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            align="center"
            height="600"
          >
            <el-table-column align="center" label="封面">
              <template slot-scope="scope">
                <img style="width:100px;height:100px" :src="scope.row.image" alt="">
              </template>
            </el-table-column>

            <el-table-column
              align="center"
              prop="title"
              label="标题"
            />
            <el-table-column prop="address" align="center" label="标签">
              <template slot-scope="scope">
                <el-tag v-for="(item,index) in scope.row.tags" :key="index" style="margin-bottom:5px" type="success">{{ item }}</el-tag>
              </template>

            </el-table-column>

            <el-table-column align="center" prop="address" label="地址" />
            <el-table-column align="center" prop="category.title" label="分类" />
            <el-table-column align="center" prop="agent.name" label="经纪" />
            <el-table-column align="center" prop="price" label="价格" />
            <el-table-column align="center" prop="desc" label="介绍" />
            <el-table-column align="center" prop="address" label="图片">
              <template slot-scope="scope">
                <span v-for="(item,index) in scope.row.photos" :key="index">
                  <img style="width:100%;height:100%" :src="item" alt="">
                </span>
              </template>
            </el-table-column>

            <el-table-column
              width="180"
              align="center"
              prop="address"
              label="操作"
            >
              <template v-slot="{row}">
                <el-button size="small" type="primary" @click="comFn(row.id)">编辑</el-button>
                <el-button size="small" type="danger" @click="delFn(row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
        <!-- 添加房产 -->
        <added ref="added" :cur-id="getId" :show-dialog.sync="showDialog" @updateList="getProperty" />
        <el-pagination
          align="center"
          :current-page="page"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-card>
    </div>
  </div>

</template>

<script>
import { getProperty, getCount, delProperties } from '@/api/property'
import Added from './components/added.vue'
import { getAgentsList } from '@/api/agents'
import { getCategoriesList } from '@/api/categories'
export default {
  components: { Added },
  data() {
    return {

      tableData: [],
      showDialog: false,
      limit: 5,
      title_contains: '',
      page: 1,
      total: 0,
      label: '',
      agentList: '', // 经纪
      categoriesList: '', // 分类
      getId: '',
      title: '',
      value: ''

    }
  },
  async created() {
    // this.getProperty()
    this.getProperty()
    // 获取数据
    this.getCount()
    // 获取经纪列表
    this.agentList = await getAgentsList()
    // console.log(116, this.agentList)
    // 获取分类列表
    this.categoriesList = await getCategoriesList()
    // console.log(119, this.categoriesList)
  },
  methods: {
    // 获取分类ID
    getCateId(item) {
      this.title = item
    },
    // 获取经纪ID
    getAgentId(item) {
      this.value = item
    },
    // 获取数量
    async getCount() {
      const res = await getCount()
      // console.log(137, res)
      this.total = res
    },
    // 弹窗显示
    addFn() {
      this.showDialog = true
    },
    // 获取房产列表
    async getProperty() {
      this.tableData = await getProperty({ _limit: this.limit, _start: this.limit * (this.page - 1) })
      this.getCount()
      // console.log(this.tableData)
    },

    handleCurrentChange(page) {
      // console.log(page)
      this.page = page
      this.getProperty()
    },
    // 筛选
    async search() {
      // console.log(174, this.title_contains, this.title, this.value)
      if (this.title_contains === '' && this.title !== '' && this.value !== '') {
        this.tableData = await getProperty({
          agent: this.value,
          category: this.title
        })
        this.total = this.tableData.length
      } else if (this.title_contains === '' && this.title !== '') {
        this.tableData = await getProperty({
          category: this.title
        })
        this.total = this.tableData.length
      } else if (this.title_contains === '' && this.value !== '') {
        this.tableData = await getProperty({
          agent: this.value
        })
        this.total = this.tableData.length
      } else if (this.title_contains === '' && this.title === '' && this.value === '') {
        this.getProperty()
      } else {
        // console.log(169, this.title)
        this.tableData = await getProperty({
          title_contains: this.title_contains
        })

        this.total = this.tableData.length
      }
    },
    // 删除房产
    delFn(id) {
      this.$confirm('你确定删除吗', '删除', {
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        type: 'warning'
      }).then(async() => {
        await delProperties(id)
        this.getProperty()
        this.$message.success('删除ok')
      }).catch(() => {
        this.$message.warning('取消删除')
        // console.log('取消删除')
      })
    },
    // 编辑房产
    async comFn(id) {
      this.showDialog = true
      // 根据id编辑
      // 编辑成功渲染
      this.getId = id
      await this.$refs.added.getPropertiesById(id)
    },
    pageChange(page) {
      this.page = page // 当前
      this.getProperty()
      // this.getCount() // 获取列表数据
    },
    // 分页函数
    handleSizeChange(size) {
      this.limit = size
      this.getProperty()
      // console.log(184, size)
      // this.getCount()
    }

  }
}
</script>

<style lang="scss" scoped>
.title{
  display: flex;
 justify-content:space-between;

}
.search{
width: 300px;
}
</style>
